<template>
	<view class="mainbody">
		<view class="walletbox">
			<view class="info">
				<view class="item">
					<view class="amount">
						{{WithdrawUserInfo.can_integral}}
					</view>
					<view class="title">
						可转让锡豆
					</view>
				</view>
				<view class="item">
					<view class="amount">
						{{WithdrawUserInfo.used_already_integral}}
					</view>
					<view class="title">
						已转让锡豆
					</view>
				</view>
			</view>
			<view class="toexchange">
				<view class="ConfirmBut" @tap="ToWithdraw">
					锡豆转让
				</view>
			</view>
		</view>
		<view class="annalbox">
			<view class="top">
				<view class="left">
					<view class="icon"></view>
					<view class="title">
						转让记录
					</view>
				</view>
			</view>
			<view class="List">
				<view class="listitem" v-for="(item,index) in WithdrawList" @tap="ToInfo(item.platform_order_no)">
					<view class="lineitem" style="margin-bottom: 12rpx;">
						<view class="left" style="font-weight: 700;font-size: 28rpx;">
							转让锡豆:{{item.amount}}
						</view>
						<view class="rigth status1" v-if="item.status == 1">
							转让中
						</view>
						<view class="rigth status2" v-if="item.status == 2">
							转让成功
						</view>
						<view class="rigth status3" v-if="item.status == 3">
							转让失败
						</view>
					</view>
					<view class="lineitem">
						<view class="left" style="font-size: 26rpx;color: #9a9a9a;">
							{{item.add_time}}
						</view>
						<view class="rigth iconfont icon-xiangyou" style="font-size: 14px;color: #999;">

						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flexbottom">

		</view>
	</view>
</template>

<script>
	import {
		WithdrawWallet,
	} from "@/api/withdraw.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				WithdrawUserInfo: {
					can_integral:0,
					used_already_integral:0,
				},
				WithdrawList: [],
				page: 1,
			}
		},
		computed: {
			...mapGetters({
				isLogin: 'isLogin'
			})
		},
		onShow() {
			let that = this;
			if (that.isLogin == false) {
				toLogin();
			}else{
				this.GetWithdrawData();
			}
		}, 
		methods: {
			GetWithdrawData() {
				// uni.getNetworkType({
				//     success: function (res) {
				//         const networkType = res.networkType; // 网络类型s
				//         if (networkType) {
				//             if (networkType == 'none') {
				//                 uni.showModal({
				//                 	title: '获取网络失败,请打开网络',
				//                 	showCancel:false,
				//                 	success:res=>{
				//                 		if(res.confirm){
				//                 			uni.navigateBack({
				//                 				delta:1
				//                 			})
				//                 		}
				//                 	}
				//                 }) 
				//                 return;
				//             }
				//         }
				//     },
				//     fail: function (err) {
				// 		uni.showToast({
				// 			title: '获取网络类型失败',
				// 			icon: 'none'
				// 		}, 1000);
				// 		return;
				//     }
				// });
				uni.showLoading({
					title: this.$t(`正在加载…`),
					mask:true
				});
				let _this = this;
				WithdrawWallet().then(res => {
					if (res.code == 200) {
						this.WithdrawUserInfo = res.data.userinfo;
						this.WithdrawList = res.data.withdrawlist;
						uni.hideLoading();
					} else {
						uni.hideLoading();
						uni.showModal({
							title: res.msg,
							showCancel:false,
							success:res2=>{
								if(res2.confirm){
									uni.navigateBack({
										delta:1
									})
								}
							}
						})
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showModal({
						title: '获取网络失败,请打开网络',
						showCancel:false,
						success:res=>{
							if(res.confirm){
								uni.navigateBack({
									delta:1
								})
							}
						}
					}) 
					// uni.showToast({
					// 	title: err,
					// 	icon: 'none'
					// });
				});
			},
			ToWithdraw() {
				if (this.WithdrawUserInfo.can_integral <= 0) {
					uni.showToast({
						title: '可转让锡豆为0',
						icon: 'none'
					}, 1000);
					return false;
				}
				if (this.WithdrawUserInfo.can_withdraw !== 1) {
					uni.showToast({
						title: '转让维护中',
						icon: 'none'
					}, 1000);
					return false;
				}
				uni.navigateTo({
					url: '/pages/withdraw/exchange'
				});
			},
			ToInfo(OrderNo) {
				uni.navigateTo({
					url: '/pages/withdraw/exchange_info?order_no=' + OrderNo
				});
			}
		}
	}
</script>

<style lang="scss">
	.walletbox {
		width: 92%;
		margin: 4% 4%;
		padding: 8% 0 3% 0;
		border-radius: 12rpx;
		background-color: #007aff1c;//ffe8e8 

		.info {
			width: 100%;
			display: flex;
			justify-content: center;

			.item {
				width: 50%;
				text-align: center;

				.amount {
					font-size: 38rpx;
					font-weight: 700;
					margin-bottom: 8rpx;
				}

				.title {
					font-size: 22rpx;
					color: #9a9a9a;
				}
			}

			.item:nth-child(1) {
				border-right: 2px solid #9a9a9a;
			}
		}

		.toexchange {
			.ConfirmBut {
				width: 80%;
				height: 70rpx;
				line-height: 70rpx;
				margin: 40rpx 10% 20rpx 10%;
				border-radius: 35rpx;
				background-color: #007aff;//#007aff;FE5C2D
				color: #fff;
				text-align: center;
			}
		}
	}

	.annalbox {
		width: 92%;
		margin: 4% 4% 0 4%;

		.top {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.left {
				width: 40%;
				display: flex;
				align-items: center;

				.icon {
					width: 4px;
					height: 20px;
					background-color: #007aff;
				}

				.title {
					margin-left: 8%;
				}
			}
		}

		.List {
			.listitem {
				width: 100%;
				padding: 4%;
				margin: 3% 0 0 0;
				background-color: #fff;
				border-radius: 12rpx;

				.lineitem {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						width: 45%;
					}

					.rigth {
						width: 55%;
						text-align: right;

					}

					.status1 {
						color: #1E9FFF;
					}

					.status2 {
						color: #4cd964;
					}

					.status3 {
						color: #FFB800;
					}
				}
			}
		}
	}

	.flexbottom {
		width: 100%;
		height: 40px;
	}
</style>